<template>
  <div>
    <van-pull-refresh v-model="isRefreshLoading" @refresh="onRefresh">
      <van-list
        v-model="isMoreLoading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoadMore"
      >
        <div class="xj-shop">
          <baidu-map id="allmap" class="allmap" @ready="handler"></baidu-map>
          <!-- 搜索框 -->
          <div class="search">
            <div class="top"></div>
            <form action="ios.html">
              <van-search v-model="keyword" placeholder="寻找身边折扣好货" shape="round" background='#f79846' input-align='center' @input="keywordInput" left-icon="" />
            </form>
            <div class="bottom"></div>
          </div>
          <!-- tab -->
          <van-sticky :offset-top="0">
            <div class="shop-tab">
              <div class="tab-title">
                <ul>
                  <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index">
                    <span @click="getItme(index)">{{item.text}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </van-sticky>
          <!-- tab-content -->
          <div class="tab-content">
            <!-- <div style="text-align: center;padding: 20px;color: #ccc;" v-show="isLoading">数据加载中</div> -->
            <ul>
              <li v-for="(store,index) in storeList" :key='index' v-show='activeClass==activeClass'>
                <div class="goods-name" @click="go_goodsdetail(store)">
                  <div class="left-photo">
                    <img v-lazy="publicUrl + store.image" alt="">
                  </div>
                  <div class="right-name">
                    <div>{{store.title}}</div>
                    <div>¥ {{store.price}}
                      <del class='be-price'>¥{{store.old_price || '0.00'}}</del>
                    </div>
                  </div>
                </div>
                <div class="store-name" @click="go_storedetail(store)">
                  <div class="store-head">
                    <div>
                      <img v-lazy="publicUrl + store.filepath" alt="">
                    </div>
                  </div>
                  <div class="shop-name" v-if="activeClass==2">
                    {{store.b_title}} | {{store.juli.toFixed(2)}}km
                  </div>
                  <div class="shop-name" v-else-if="activeClass!=2">{{store.b_title}} | {{store.juli.toFixed(2)}}km</div>
                  <div class="store-go">
                    <van-icon size="0.3rem" name="arrow" />
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>

</template>
<script>
import { postShopList } from '../../api/ajax';
export default {
  data: function () {
    return {
      activeClass: 0,
      itemList: [
        { text: '全部' },
        { text: '限时购' },
        { text: '清仓' }
      ],
      storeList: [],
      show_goods: 3,
      pointData: {},
      keyword: '',
      isLoading: true,
      isRefreshLoading: false,
      BMapData: {},
      total: 0,
      isMoreLoading: false,
      finished: false
    }
  },

  mounted() {
    // let locationPoint = this.$pcCookie.get('locationPoint') || '';
    // let currentCity = this.$pcCookie.get('locationCity') || '';
    // let pointData = {
    //   lng: locationPoint.split(',')[0],
    //   lat: locationPoint.split(',')[1]
    // }
    // if(currentCity && locationPoint) {
    //   this.currentCity = currentCity;
    //   this.postShopList(pointData);
    // }
  },
  methods: {
    onLoadMore() {
      if(JSON.parse(JSON.stringify(this.BMapData)) === '{}') {
        this.isMoreLoading = false;
      } else {
        this.postShopList(this.pointData, '', this.show_goods, this.keyword)
      };
    },
    onRefresh() {
      if(JSON.parse(JSON.stringify(this.BMapData)) === '{}') {
        this.isRefreshLoading = false;
      } else {
        this.total = 0;
        this.finished = false;
        this.isMoreLoading = false;
        this.storeList = [];
        this.postShopList(this.pointData, '', this.show_goods, this.keyword)
      };
    },
    keywordInput(keyword) {
      this.storeList = [];
      this.total = 0;
      this.finished = false;
      this.isMoreLoading = false;
      this.postShopList(this.pointData, '', this.show_goods, keyword)
    },
    async postShopList({ lat, lng }, order = '', show_goods = 3, keyword = '') {
      this.isLoading = true;
      const { total } = this;
      this.total += 10;
      const result = await postShopList({
        show_goods: this.show_goods,
        lat,
        lng,
        order,
        keyword,
        total
      });
      this.isLoading = false;
      this.isRefreshLoading = false;
      this.isMoreLoading = false;
      if (!!result) {
        if (result) {
          result.forEach(element => {
            element.score = parseFloat(element.score || 0);
          });
          if(result.length === 0) {
            this.finished = true;
          } else {
            this.storeList = this.storeList.concat(result);
          }
        }
      }
    },
    handler({ BMap, map }) {
      // let locationPoint = this.$pcCookie.get('locationPoint') || '';
      // let currentCity = this.$pcCookie.get('locationCity') || '';
      // let pointData = {
      //   lng: locationPoint.split(',')[0],
      //   lat: locationPoint.split(',')[1]
      // }
      // if(currentCity && locationPoint) {
      //   this.currentCity = currentCity;
      //   this.postShopList(pointData);
      //   this.pointData = pointData;
      // } else {
        this.loacl(BMap, map, (data) => {
          this.BMapData = data;
          this.currentCity = data.addressComponents.city;
          this.postShopList(data.point);
          this.pointData = data.point;
        });
      // }
    },
    getItme(index) {
      this.storeList = [];
      this.total = 0;
      this.finished = false;
      this.isMoreLoading = false;
      if(index === 0) {
        this.show_goods = 3
        this.postShopList(this.pointData, '', 3)
      }else if(index === 1) {
        this.show_goods = 1
        this.postShopList(this.pointData, '', 1)
      }else if(index === 2) {
        this.show_goods = 2
        this.postShopList(this.pointData, '', 2)
      }
      this.activeClass = index;  // 把当前点击元素的index，赋值给activeClass
    },
    go_goodsdetail(store) {
      this.jump('goodsdetail', {
        id: store.id
      });
    },
    go_storedetail(store) {
      this.jump('detail', {
        id: store.b_id
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.van-list {
  padding-bottom: 50px;
}
.xj-shop {
  padding-bottom: px2rem(15);
  background-color: #f4f4f4;
  .search {
    .top,
    .bottom {
      height: px2rem(5);
      background-color: #f79846;
    }
  }

  .shop-tab {
    height: px2rem(45);
    background-color: #fff;
    li {
      width: 20%;
      float: left;
      text-align: center;
      padding-top: px2rem(15);

      span {
        color: #696969;
        margin: auto 0;
        padding: px2rem(3) px2rem(9);
        border: px2rem(1) #696969 solid;
        border-radius: px2rem(12);
      }
    }
    .active {
      span {
        background-color: #f79846;
        color: #fff;
        border-color: #f79846;
      }
    }
  }

  .tab-content {
    // height: 100%;
    // background-color: red;
    li {
      width: 95%;
      height: px2rem(155);
      background-color: #fff;
      margin: 0 auto;
      margin-top: px2rem(15);
      border-radius: px2rem(15);
      overflow: hidden;
      .goods-name {
        display: flex;
        height: px2rem(110);
        border-bottom: px2rem(1) #f4f4f4 solid;
        .left-photo {
          width: px2rem(89);
          height: px2rem(89);
          border-radius: px2rem(10);
          background-color: #272822;
          margin-top: px2rem(11);
          margin-left: px2rem(11);
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .right-name {
          position: relative;
          font-size: px2rem(14);
          font-weight: bold;
          padding-left: px2rem(10);
          padding-top: px2rem(10);
          width: 64%;
          div:last-child {
            font-size: px2rem(16);
            color: #f79846;
            position: absolute;
            left: px2rem(10);
            bottom: px2rem(10);
            .be-price {
              font-size: px2rem(12);
              font-weight: normal;
              color: #b9b9b9;
            }
          }
        }
      }
      .store-name {
        // overflow: hidden;
        // display: flex;
        height: px2rem(35);
        // background-color: #aaa;
        padding-top: px2rem(11);
        padding-left: px2rem(11);
        .store-head {
          float: left;
          // width: 10%;

          div {
            //  margin: 0 auto;
            width: px2rem(20);
            height: px2rem(20);
            background-color: #111;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .shop-name {
          float: left;
          color: #a3a3a3;
          padding-top: px2rem(2);
          padding-left: px2rem(3);
        }
        .store-go {
          float: right;
          color: #a3a3a3;
          padding-top: px2rem(3);
          padding-right: px2rem(10);
        }
      }
    }
  }
}
</style>
